<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="set-box">
					<view class="set-item flexWrapNo" :class="{active:currmentIndex==0}" @tap="changeNav(0)">
						<text class="cheack"></text>
						24小时营业
					</view>
					<view class="set-item" :class="{active:currmentIndex==1}" @tap="changeNav(1)">
						<view class="flexWrapNo">
							<text class="cheack"></text>
							自定义非营业时间
						</view>
						<view class="time-box flexWrapNo" v-if="currmentIndex==1">
							<view class="time-item">
								<picker mode="time" :value="starTime"  :data-index='0' @change="bindTimeChange">
									<view class="uni-input">{{starTime}}</view>
								</picker>
							</view>
							<view class="line">-</view>
							<view class="time-item">
								<picker @change="changeDate" :value="dateIndex" :range="dateList" range-key="name">
									<view class="flexWrapNo">
										<view  class="uni-input">{{dateList[dateIndex].name}}</view>
									</view>
								</picker>
							</view>
							<view class="line">~</view>
							<view class="time-item">
								<picker mode="time" :start="currentTime" :value="endTime" :data-index='1' @change="bindTimeChange">
									<view class="uni-input">{{endTime}}</view>
								</picker>
							</view>
						</view>
					</view>
				</view>
				<view class="explain-box">
					<view>说明：</view>
					<view>1、非营业时间内，将不允许下单，当订单的开始时间或者结束时间在非营业时间内时，系统提示：“非营业时间，请勿下单”；</view>
					<view>2、当前时间处于非营业时间段内时，“乒个乓自助”小程序中店铺状态将会变为“非营业时间”状态；打开店铺首页，所有桌台处于“维护中”状态，不可下单。</view>
					<view>3、当前时间处于非营业时间之外时，“乒个乓自助”小程序中店铺状态将会变为“营业中”状态。</view>
				</view>
				<view class="bottom-box flexWrapNo">
					<!-- 已保存 -->
					<view class="define-btn" @tap="setBusiness()">确定</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc:0,
				currmentIndex:0,
				starTime:"00:00",
				endTime:"00:00",
				currentTime:"",
				business_hours:"",
				dateList:[{name:"当日",id:1},{name:'次日',id:2}],
				dateIndex:0,
				dateName:"",
				dateId:"",
			}
		},
		onLoad(ops) {
			if(ops&&ops.business_hours){
				this.business_hours=ops.business_hours
				this.dateIndex=Number(ops.is_today)-1
				this.dateId=ops.is_today
				if(this.business_hours!=24){
					this.currmentIndex=1
					this.starTime=this.business_hours.split('-')[0]
					this.endTime=this.business_hours.split('-')[1]
				}
			}
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		methods: {
			changeNav(index){
				this.currmentIndex=index
			},
			bindTimeChange: function(e) {
				console.log(e)
				if(e.target.dataset.index==0){
					this.starTime = e.detail.value
					if(this.dateIndex==1){
						this.currentTime="0:00"
						this.endTime ="0:00"
					}else{
						this.currentTime=this.starTime
						this.endTime =this.starTime
					}
				}else{
					this.endTime = e.detail.value
				}
			},
			changeDate(e){
				this.dateIndex = e.detail.value
				this.dateName=this.dateList[this.dateIndex].name
				this.dateId=this.dateList[this.dateIndex].id
				if(this.dateIndex==1){
					this.currentTime="0:00"
					this.endTime ="0:00"
				}else{
					this.currentTime=this.starTime
					this.endTime =this.starTime
				}
			},
			// 设置营业时间
			setBusiness(){
				if(this.starTime==this.endTime){
					this.$tools.showToast('设置错误')
					return;
				}
				this.business_hours=this.currmentIndex==0?24:this.starTime+'-'+this.endTime
				this.$request.post(this.$api.setBusiness, {
					business_hours:this.business_hours,
					store_id:uni.getStorageSync('store_id'),
					is_today:this.dateId
				}, {
					token:true
				}).then(res => {
					if (res.code==1) {
						this.$tools.showToast('设置成功!')
						let pages = getCurrentPages(); //当前页
						let beforePage = pages[pages.length - 2]; //上个页面
						beforePage.$vm.getStoreInfo()
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},2000)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content{
		padding:36upx;
	}
	.set-box{
		padding: 50upx 28upx;
		background: #1A195F;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		.set-item{
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			&:nth-last-of-type(1){
				margin-top: 60upx;
			}
			.cheack{
				width: 32rpx;
				height: 32rpx;
				background: rgba(255,255,255,0.1);
				border: 2rpx solid #FFFFFF;
				display: inline-block;
				border-radius: 50%;
				margin-right: 34upx;
				position: relative;
			}
			.time-box{
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				margin-top: 32upx;
				.time-item{
					width: 242rpx;
					height: 80rpx;
					line-height: 80rpx;
					background: #312F80;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					text-align: center;
					.uni-input{
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						// margin: 20upx 26upx;
						min-width: 100upx;
						min-height: 50upx;
						width: 100%;
					}
					.triangle{
						border-top-color: #FFFFFF;
					}
				}
				.line{
					margin: 0 22upx;
				}
			}
		}
		.active{
			.cheack{
				border: 2rpx solid #26BCFD;
				&::after{
					content: '';
					width: 12rpx;
					height: 12rpx;
					background: #26BCFD;
					border-radius: 50%;
					display: inline-block;
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					margin:auto;
				}
			}
		}
	}
	.explain-box{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #9191A7;
		line-height: 48rpx;
		margin-top: 28upx;
	}
	.bottom-box{
		height: 120rpx;
		background: #1D1C5C;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		justify-content: center;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		.define-btn{
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 80rpx;
			width: 322rpx;
			height: 80rpx;
			background: #26BCFD;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			text-align: center;
		}
	}
</style>
